<template>
	<view class="booking">
		<!-- 顶部选择头 -->
		<view class="title-select-box">
			<view :class="['title-left-box', index == 0? 'title-active': '']" :style="{color: index == 0?'#009B65':'#FFFFFF'}"
				@click="selectBtn(0)"
				>
				<view class="" >
					正在抢购
				</view>
				<view class="icon-bottom" v-if="index == 0"></view>
			</view>
			<view :class="['title-right-box', index == 1? 'title-active': '']" :style="{color: index == 1?'#009B65':'#FFFFFF'}"
				@click="selectBtn(1)"
				>
				<view class="" >
					开团预告
				</view>
				<view class="icon-bottom" v-if="index == 1"></view>
			</view>
		</view>
		<!-- 说明 -->
		<view v-if="groupList.length > 0" style="width: auto; height: 80rpx; margin: 0 24rpx; background: #FFFFFF; display: flex; flex-direction: row; align-items: center; justify-content: center;">
			<view style="margin-right: 20rpx; color: gainsboro;">
				———
			</view>
			<view >
				<view style="text-align: center; font-size: 32rpx; font-weight: 400;">
					{{groupList[0].groupName}}
				</view>
				<view style="display: flex; flex-direction:  row; align-items: center;">
					<span v-if="index == 0" style="color: #000000; font-size: 22rpx; margin-right: 5rpx;">本场仅剩：</span>
					<span v-if="index == 1" style="color: #000000; font-size: 22rpx; margin-right: 5rpx;">开场倒计时：</span>
					<uni-countdown v-if="showCountDown" ref='countdown' :font-size="11" color="#000000" background-color="#cbeedd" border-color="#cbeedd" :showDay="true"
					:day="countDateTime.countDay"  :hour="countDateTime.countHour" :minute="countDateTime.countDown" :second="countDateTime.secondTime" @timeup="timeout" ></uni-countdown>
				</view>
			</view>
			<view style="margin-left: 20rpx; color: gainsboro;">
				———
			</view>
		</view>
		<!-- 数据的身体 -->
		<view class="content-select-box">
			<!-- <u-empty text="数据为空" mode="list"></u-empty> -->
			<view v-if="groupList.length == 0" class="empty">
				<image mode="aspectFit" src="https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/08/06/e98e8378-44ea-4f88-8f6a-a9aa7d47f27f.png" class="blank-img"></image>
				<view class="blank-tips">暂无抢购商品</view>
			</view>
			<view class="product-card-box" v-for="(item, ids) in groupList" :key="ids">
				<view class="img-box" @click="buyOrCollect(ids)">
					<image :src="item.skuDefaultImg" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 16rpx;"></image>
				</view>
				<view class="product-name-text">
					{{item.skuName}}
				</view>
				<view style="display: flex; flex-direction: row; margin-top: 28rpx;">
					<!-- 左侧盒子 -->
					<view class="left-info-box">
						<!-- 抢购 -->
						<view class="" >
							<ai-progress v-if="index == 0" :percentage="(transitionNum(item.yetNum, item.groupNum) * 100)" :textInside="false" strokeWidth="6" isAnimate="true" duration="3000" bgColor="#009B65" inBgColor="#D1FFDF"></ai-progress>
						</view>
						<view class="plan-text" v-if="index == 0 && item.yetNum < item.groupNum">
							<!-- 已抢{{(transitionNum(item.yetNum, item.groupNum) * 100).toFixed(2)}}% -->
							未成团，继续拼
						</view>
						<view class="plan-text" v-if="index == 0 && item.yetNum >= item.groupNum">
							已成团，继续拼
						</view>
						<!-- 预购 -->
						<view style="display: flex; flex-direction: row;" v-if="index == 1">
							<view class="" >
								<image src="../../../static/image/more-ponser.png" style="width: 32rpx; height: 30rpx;"></image>
							</view>
							<view class="text-number" style="margin-left: 10rpx; margin-right: 32rpx;">
								开团数量：{{item.inventory}}
							</view>
							<view class="text-number">
								{{item.collect == null?0:item.collect}}人超想买
							</view>
						</view>
						
						<view :style="{marginTop: index == 1?'40rpx':''}" style="display: flex; flex-direction: row; align-items: flex-end;">
							<view class="price-text" >
								￥{{(item.price).toFixed(2)}}
							</view>
							<view class="link-price-text" >
								￥{{(item.linePrice).toFixed(2)}}
							</view>
						</view>
					</view>
					<!-- 右侧购物车盒子 -->
					<view class="right-info-box">
						<view class="green-box" @click="buyOrCollect(ids)">
							<view class="cart-right-box">
								<image :src="images[index]" style="width: 50rpx; height: 50rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 购买记录 -->
				<view class="pay-info-box" v-if="index == 0">
					<view class="column-text-box" :class="{anim:animate==true}" v-for="(info, iis) in item.payInfoListVos" :key="iis">
						<view class="left-text">
							<span style=" margin: 0 10rpx; font-size: 24rpx; line-height: 28rpx; color: #000000;">{{ hideUserName(info.receiverName) }}</span>
							<span style="color: red; margin-right: 10rpx;"> X{{info.skuQuantity}} </span>
							{{ frontDate(info.payMinute) }}
						</view>
						<view class="right-text">
							{{ info.skuName }}
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import AiProgress from "@/components/ai-progress/ai-progress.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			AiProgress
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		data() {
			return {
				// 滚动控制
				animate: false,
				// 刷新时间
				showCountDown: true,
				// 0：正在抢购，1：开团预告
				index: 0,
				// 团购数据
				groupList: [],
				// 倒计时
				countDateTime: {
					countDay: null,
					countHour: null,
					countDown: null,
					secondTime: null,
				},
				// 购物车与收藏图片
				images:[ '../../../static/image/cart-white.png', '../../../static/image/shoucang.png' ]
			}
		},
		onLoad() {
			this.getGroupList(0)
		},
		mounted() {
			this.timer= setInterval(this.scroll,2000)
		},
		methods: {
			...mapMutations(['login', 'addFootPrint']),
			// 获取页面数据
			getGroupList(index){
				const that = this
				this.$api.request.getGroupList({
					status: index
				}, res => {
					if(res.code == 200){
						this.groupList = res.data
						if(index == 0 && res.data.length > 0){
							console.log("进入了正在抢购");
							this.countDown(res.data[0].endTime)
						}else if(index == 1 && res.data.length > 0){
							console.log("进入了开团预告");
							this.countDown(res.data[0].startTime)
						}
					}
				})
			},
			
			transitionNum(startNum, endNum){
				let number = startNum / endNum
				return number > 1?1:number
			},
			
			// 处理倒计时
			countDown(time){
				let newTime = time.replace(/-/g, '/')
				const that = this
				var today=new Date();
				var active=new Date(newTime);
				var res=active-today;
				var day=parseInt(res/1000/60/60/24);
				var hours=parseInt(res/1000/60/60%24);
				var minutes=parseInt(res/1000/60%60);
				var seconds=parseInt(res/1000%60);
				this.countDateTime.countDay = day
				this.countDateTime.countHour = hours
				this.countDateTime.countDown = minutes
				this.countDateTime.secondTime = seconds	
				that.showCountDown = false
				that.$nextTick(() => {
					that.showCountDown = true
				})
			},
			// 点击选择头
			selectBtn(index) {
				if(this.index != index){
					this.index = index
					this.getGroupList(index)
				}
			},
			// 购买与收藏图标
			buyOrCollect(index){
				const that = this
				// 购买
				if(this.index == 0){
					uni.navigateTo({
						url: '/pages/sys/home/product?id=' + this.groupList[index].skuId
					})
				}
				// 收藏
				else {
					if(this.hasLogin){
						this.$api.request.skuCollect({
							skuId: this.groupList[index].skuId,
							spuId: this.groupList[index].spuId,
							spuName: this.groupList[index].skuName,
							spuImage: this.groupList[index].skuDefaultImg,
							price: this.groupList[index].price
						}, res => {
							this.$u.toast(res.message);
							that.getGroupList(that.index)
						})
					}else{
						this.goLogin()
					}
					
				}
			},
			// 登录
			goLogin(){
				uni.navigateTo({
					url: '/pages/sys/common/login'
				})
			},
			// 倒计时到点触发，刷新页面
			timeout(){
				const that = this
				let message = this.index == 0?'活动已经结束':'活动已经开始'
				uni.showModal({
					title: '温馨提示',
					content: message,
					showCancel: false,
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
							that.getGroupList(that.index)
						} 
					}
				})
			},
			// 隐藏用户名称
			hideUserName(data){
				return data.charAt(0) + '**'
			},
			// 判断超过时间
			frontDate(date){
				if(date <= 60){
					return date + '分钟前'
				}else if( date > 60 && date < 1440){
					return Math.floor((date / 60)) + '小时前'
				}else if( date >= 1440 ){
					return Math.floor((date / 1440)) + '天前'
				}
			},
			// 滚动控制
			scroll() {
				let that = this;
				that.animate = !that.animate;
				for(let i = 0; i < that.groupList.length; i++){
					setTimeout(function () {
						that.groupList[i].payInfoListVos.push(that.groupList[i].payInfoListVos[0]);
						that.groupList[i].payInfoListVos.shift();
						that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
					}, 500)
				}
				
			},
		},
		beforeDestroy() {
			if (this.timer) {clearInterval(this.timer);}
		}
	}
</script>

<style lang="scss" scoped>
	.booking{
		width: 100vw;
		height: calc(100vh - 10rpx);
		padding-top: 10rpx;
		background: #D1FFDF;
	}
	
	.title-select-box{
		width: auto;
		height: 88rpx;
		margin: 22rpx 24rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		background: #03D189;
		border-radius: 16rpx 16rpx 0px 0px;
	}
	
	.title-left-box{
		width: 50%;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		border-radius: 16rpx 0px 0px 0px;
		position: relative;
	}
	
	.title-right-box{
		width: 50%;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		border-radius: 0px 16rpx 0px 0px;
		position: relative;
	}
	.title-active{
		position: relative;
		padding-top: 8rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		&::after{
			content: "";
			position: absolute;
			bottom: -4rpx;
			width: 40rpx;
			height: 55%;
			display: block;
			text-align: center;
			background-image: radial-gradient(200rpx at 50rpx 0px, #03D189 50rpx, #fff 50rpx);
		}
		&:first-child{
			&::after{
				right: -40rpx;
			}
		}
		&:last-child{
			&::after{
				left: -40rpx;
				transform: scaleX(-1);
			}
		}
	}
	.icon-bottom{
		width: 60rpx;
		height: 12rpx;
		position: absolute;
		bottom: 6rpx;
		overflow: hidden;
		&::after{
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: -160%;
			height: 200%;
			border-radius: 50%;
			border: 4rpx solid #009B65;
		}
	}
	
	.content-select-box{
		width: 100%;
		height: calc(100vh - 90rpx - 110rpx);
		overflow-y: scroll;
	}
	
	.product-card-box{
		width: auto;
		// height: 592rpx;
		margin: 0 24rpx;
		margin-bottom: 24rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.0400);
		border-radius: 16rpx;
		
		.img-box{
			width: auto;
			height: 322rpx;
			margin: 0 24rpx;
			margin-bottom: 24rpx;
			border-radius: 16rpx;
		}
		
		.product-name-text{
			width: auto;
			height: 44rpx;
			margin: 0 24rpx;
			font-size: 32rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #111111;
			line-height: 44rpx;
		}
	}
	
	.left-info-box{
		width: 70%;
		margin-left: 24rpx;
		
		.plan-text {
			text-align: right;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
			line-height: 34rpx;
			margin-top: 16rpx;
		}
	}
	
	.right-info-box{
		width: 30%;
		margin-right: 24rpx;
	}
	
	.price-text{
		font-size: 48rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #009B65;
		line-height: 60rpx;
	}
	
	.link-price-text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		margin-left: 16rpx;
		text-decoration: line-through;
	}
	
	.green-box{
		width: 120rpx;
		height: 120rpx;
		background: #cbeedd;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: 0;
		border-radius: 120rpx;
		
		.cart-right-box{
			width: 96rpx;
			height: 96rpx;
			border-radius: 96rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(328deg, #03D289 0%, #009B65 100%);
		}
	}
	
	.text-number{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #009B65;
		line-height: 40rpx;
	}
	.empty{
		background: #fff;
		padding: 136rpx 0 90rpx;
		.blank-img{
			width: 480rpx;
			height: 298rpx;
			display: block;
			margin: 0 auto;
		}
		.blank-tips{
			font-size: 28rpx;
			color: #444;
			margin-top: 32rpx;
			text-align: center;
		}
	}
	
	.pay-info-box{
		width: auto;
		height: 200rpx;
		margin-top: 20rpx;
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		// border: 1rpx solid #03D189;		
		overflow: hidden;

	}
	
	
	.column-text-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.left-text{
		font-size: 24rpx;
		color: #909399;
		line-height: 28rpx;
	}
	
	.right-text{
		width: 320rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #111111;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	
</style>